﻿<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery多皮肤悬浮QQ客服插件fixed - 站长素材</title>
<style type="text/css">
* { margin:0; padding:0; }
body { font:13px/1.5 "Microsoft Yahei" }
a{ color:#737373;text-decoration:none;}
a:hover { text-decoration:none; color:#f30;}
.clearfix:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{*zoom:1;}

.demo { width:960px; margin:0 auto; padding:100px 50px 0; background-color:#f2f2f2; }
.demo-copyright { margin-top:100px; text-align:center; }
</style>
<link rel="stylesheet" type="text/css" href="css/service.css"/>
<style type="text/css">
.custom_style_01 .content_box { width:118px; _width:117px; }
.custom_style_01 .content_title { height:33px; background:url(images/service/custom_style_01.gif) no-repeat -100px 0; }
.custom_style_01 .content_list { border-left:1px solid #1e1824; border-right:1px solid #1e1824; background:#fff; }
.custom_style_01 .content_list .qqserver p span { display:none;}
.custom_style_01 .content_bottom { height:2px; background:#1e1824; }
.custom_style_01 .close_btn { right:1px; top:2px;}
.custom_style_01 .close_btn, .custom_style_01 .close_btn a { width:24px; height:22px; background:url(images/service/custom_style_01.gif) no-repeat -250px 0; }
.custom_style_01 .show_btn { width:33px; height:120px; background:url(images/service/custom_style_01.gif) no-repeat 0 0;  }
</style>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.fixed.1.5.1.js"></script>
<script language="javascript">
//must window loading,don't use the document loading
$(window).load(function(){
		
	//悬浮客服
	$("#fixedBox").fix({
		position 		: "right",	//悬浮位置 - left或right
		//horizontal  	: 50,		//水平方向的位置 - 默认为数字
		//vertical    	: 100,    //垂直方向的位置 - 默认为null
		//halfTop     	: true,	//是否垂直居中位置
		//minStatue 		: false,	//是否最小化
		//hideCloseBtn 	: false,	//是否隐藏关闭按钮
		//skin 			: "blue",	//皮肤
		showBtnWidth 	: 33,       //show_btn_width
		contentBoxWidth : 118		//side_content_width
	});

});
</script>

</head>

<body>
<div class="demo" style="height:2000px;">        
    <div class="demo-copyright">
   <center>
  <span style="font-size:15px; font-weight:bold; text-align:center; line-height:25px; color:#000; width:100%"><br>
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p></span>
</center>
    </div>
</div>

<!-- S 客服 -->
<div class="fixed_box custom_style_01" id="fixedBox">
    <div class="content_box">
        <div class="content_inner">
        	<div class="close_btn"><a title="关闭"><span>关闭</span></a></div>
            <div class="content_title"><span>客服中心</span></div>
            <div class="content_list">            	
                <div class="qqserver">
                    <p>                        
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                          <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                          <span>方雨</span>
                    	</a>
                    </p>
                    <p>
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                          <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                          <span>方雨</span>
                    	</a>
                    </p>
                    <p>
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                          <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                          <span>方雨</span>
                    	</a>
                    </p>       
                    <p>                        
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                          <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                          <span>方雨</span>
                    	</a>
                    </p>
                    <p>
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                          <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                          <span>方雨</span>
                    	</a>
                    </p>
                    <p>
                        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=168660460&site=qq&menu=yes">
                          <img border="0" src="http://wpa.qq.com/pa?p=2:168660460:41" alt="点击这里给我发消息" title="点击这里给我发消息">
                          <span>方雨</span>
                    	</a>
                    </p>             
                </div>               
                <hr>
                <div class="phoneserver">
                    <h5>客户服务热线</h5>
                    <p>请直接QQ联系！</p>
                </div>
                <hr>
                <div class="msgserver">
                    <p><a href="http://sc.chinaz.com">给我们留言</a></p>
                </div>
            </div>
            <div class="content_bottom"></div>
        </div>
    </div>
    <div class="show_btn"><span>展开客服</span></div>
</div>
<!-- E 客服 -->
</body>
</html>
